<template>
	<view class="container">
		<view class="tui-tabs">
			<QSTabsWxsListRefresh ref="QSTabsWxs" minWidth="125rpx" type="default" :tabsSticky='true' refreshImage="/static/refresh.png"
			 :height="height">
				<view class="" style="width: 100%;" slot="pre">
					<view class="tui-banner-swiper">
						<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true">
							<block v-for="(item, index) in banner" :key="index">
								<swiper-item :data-index="index">
									<image :src="item" class="tui-slide-image" />
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
				<view style="height:90rpx;width: 100%;" slot="pos"></view>
			 </QSTabsWxsListRefresh>
		</view>
		<myTabar :current="0" @tabBarClick="tabbarSwitch"></myTabar>
		<tui-bottom-popup class="tui-task-bottom" :zIndex="10000" :maskZIndex="9999" :show="popupShow" @close="popup">
			<view class="tui-task">
				<view class="tui-task-title">选择任务类型</view>
				<view class="taskMain">
					<tui-grid :unlined="true" v-if="popupInShow">
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp">
								<view class="tui-grid-icon">
									<image src="../../static/images/nav1.png" mode=""></image>
								</view>
								<text class="tui-grid-label">京东金融</text>
							</view>
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay200">
								<view class="tui-grid-icon">
									<image src="../../static/images/nav2.png" mode=""></image>
								</view>
								<text class="tui-grid-label">滴滴</text>
							</view>
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false" @click="publish">
							<view class="bounceInUp delay400">
								<view class="tui-grid-icon">
									<image src="../../static/images/nav3.png" mode=""></image>
								</view>
								<text class="tui-grid-label">拼多多</text>
							</view>

						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay100">
								<view class="tui-grid-icon">
									<image src="../../static/images/nav4.png" mode=""></image>
								</view>
								<text class="tui-grid-label">京东</text>
							</view>

						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay300">
								<view class="tui-grid-icon">
									<image src="../../static/images/nav5.png" mode=""></image>
								</view>
								<text class="tui-grid-label">快手</text>
							</view>

						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay500">
								<view class="tui-grid-icon">
									<image src="../../static/images/nav6.png" mode=""></image>
								</view>
								<text class="tui-grid-label">淘宝</text>
							</view>

						</tui-grid-item>
					</tui-grid>
				</view>
				<view class="tui-btn-cancle" @tap="popup">
					<image src="../../static/images/close.png" mode=""></image>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import QSTabsWxs from '@/components/QS-tabs-wxs-list/QS-tabs-wxs-list.vue';
	import QSTabsWxsListRefresh from '@/components/QS-tabs-wxs-list/QS-tabs-wxs-list-refresh.vue';
	import myTabar from "@/components/myTabar/index.vue"
	const {
		windowHeight
	} = uni.getSystemInfoSync();
	export default {
		components: {
			QSTabsWxs,
			QSTabsWxsListRefresh,
			myTabar
		},
		data() {
			return {
				current: 0,
				title: 'Hello',
				height: 500,
				topViewHeight: 44,
				backgroundColor: 'rgba(248,248,248,.7)',
				popupShow: false,
				popupInShow: false,
				windowHeight,
				banner: [
					'https://www.thorui.cn/img/product/11.jpg',
					'https://www.thorui.cn/img/product/2.png',
					'https://www.thorui.cn/img/product/33.jpg',
					'https://www.thorui.cn/img/product/4.png',
					'https://www.thorui.cn/img/product/55.jpg',
					'https://www.thorui.cn/img/product/6.png',
					'https://www.thorui.cn/img/product/7.jpg',
					'https://www.thorui.cn/img/product/8.jpg'
				],
				tabBars: [{
						name: '全部',
						id: 0,
						type: ''
					},
					{
						name: '推荐',
						id: 1,
						type: ''
					},
					{
						name: '拼多多',
						id: 2,
						type: 'pdd'
					},
					{
						name: '滴滴',
						id: 3,
						type: 'dd'
					},
					{
						name: '淘宝',
						id: 4,
						type: 'tb'
					},
					{
						name: '京东',
						id: 5,
						type: 'jd',
					},
					{
						name: '快手',
						id: 6,
						type: 'ks',
					},
					{
						name: '京东金融',
						id: 7,
						type: 'jdjr',
					}
				],
			}
		},
		onReady() {
			// this.getTopViewHeight();
			this.$refs.QSTabsWxs.setTabs(this.tabBars);
			this.height = wx.getSystemInfoSync().windowHeight - 45
		},
		methods: {
			getTopViewHeight() {
				let view = uni.createSelectorQuery().in(this);
				view.select('.tui-banner-swiper').boundingClientRect();
				view.exec(res => {
					console.log('总高度:' + JSON.stringify(res));
					this.hasRefreshContainerheight = wx.getSystemInfoSync().windowHeight - res[0].height;
				})
			},
			tabbarSwitch(e) {
				//获取登录状态，此处默认未登录
				let isLogin = uni.getStorageSync("isLogin");
				console.log(isLogin)
				if (e.verify && !isLogin) {
					// this.tui.toast('您还未登录，请先登录');
					this.current = e.index;
					uni.reLaunch({
						url:"/pages/login/login"
					})
				} else {
					if (!e.hump) {
						this.current = e.index;
						uni.reLaunch({
							url: e.pagePath
						})
					} else {
						this.popupShow = !this.popupShow
						this.popupInShow = !this.popupInShow
					}
				}
			},
			popup() {
				this.popupShow = !this.popupShow
				setTimeout(()=> {
					this.popupInShow = !this.popupInShow
				},100)
			},
			publish () {
				uni.navigateTo({
					url:"/pages/task/pdd/index?type=pdd"
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.container {
		.tui-banner-swiper {
			width: 750rpx;
			height: 398rpx;

			swiper {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.tui-tabs {
			padding-bottom: 90rpx;
		}

		.tui-task-bottom {
			.tui-task {
				padding-bottom: 70rpx;

				.tui-task-title {
					padding-left: 38rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}

				.taskMain {
					min-height: 428rpx;
					text-align: center;

					.tui-grid-icon {
						width: 90rpx;
						height: 92rpx;
						margin: 0 auto;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.tui-grid-label {
						font-size: 26rpx;
						color: #333;
					}
				}

				.tui-btn-cancle {
					width: 30rpx;
					height: 30rpx;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			::v-deep {
				.tui-bottom-popup {
					background: none !important;
				}

				.tui-popup-mask {
					overflow: hidden;
					background: rgba(255, 255, 255, 0.8);
					-webkit-backdrop-filter: saturate(180%) blur(40rpx);
					backdrop-filter: saturate(180%) blur(40rpx);

				}

				.tui-grid::before {
					border-right: none;
				}
			}
		}

	}

	/* 弹动进入 */
	.bounceInUp {
		-webkit-animation: bounceInUp 1s ease both;
		animation: bounceInUp 1s ease both
	}

	@-webkit-keyframes bounceInUp {

		0%,
		100%,
		60%,
		75%,
		90% {
			-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		0% {
			opacity: 1;
			-webkit-transform: translate3d(0, 100px, 0)
		}

		60% {
			opacity: 1;
			-webkit-transform: translate3d(0, -20px, 0)
		}

		75% {
			-webkit-transform: translate3d(0, 10px, 0)
		}

		90% {
			-webkit-transform: translate3d(0, -5px, 0)
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0)
		}
	}

	@keyframes bounceInUp {

		0%,
		100%,
		60%,
		75%,
		90% {
			transition-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		0% {
			opacity: 0;
			transform: translate3d(0, 3000px, 0)
		}

		60% {
			opacity: 1;
			transform: translate3d(0, -20px, 0)
		}

		75% {
			transform: translate3d(0, 10px, 0)
		}

		90% {
			transform: translate3d(0, -5px, 0)
		}

		100% {
			transform: translate3d(0, 0, 0)
		}
	}

	.delay100 {
		-webkit-animation-delay: .1s;
		animation-delay: .1s
	}

	.delay180 {
		-webkit-animation-delay: .18s;
		animation-delay: .18s
	}

	.delay200 {
		-webkit-animation-delay: .2s;
		animation-delay: .2s
	}

	.delay300 {
		-webkit-animation-delay: .3s;
		animation-delay: .3s
	}

	.delay400 {
		-webkit-animation-delay: .4s;
		animation-delay: .4s
	}

	.delay500 {
		-webkit-animation-delay: .5s;
		animation-delay: .5s
	}

	.delay600 {
		-webkit-animation-delay: .6s;
		animation-delay: .6s
	}

	.delay700 {
		-webkit-animation-delay: .7s;
		animation-delay: .7s
	}

	.delay800 {
		-webkit-animation-delay: .8s;
		animation-delay: .8s
	}

	.delay900 {
		-webkit-animation-delay: .9s;
		animation-delay: .9s
	}

	.delay1000 {
		-webkit-animation-delay: 1s;
		animation-delay: 1s
	}

	.delay1100 {
		-webkit-animation-delay: 1.1s;
		animation-delay: 1.1s
	}

	.delay1200 {
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s
	}

	.delay1300 {
		-webkit-animation-delay: 1.3s;
		animation-delay: 1.3s
	}

	.delay1400 {
		-webkit-animation-delay: 1.4s;
		animation-delay: 1.4s
	}

	.delay1500 {
		-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s
	}

	.delay1600 {
		-webkit-animation-delay: 1.6s;
		animation-delay: 1.6s
	}

	.delay1700 {
		-webkit-animation-delay: 1.7s;
		animation-delay: 1.7s
	}

	.delay1800 {
		-webkit-animation-delay: 1.8s;
		animation-delay: 1.8s
	}

	.delay1900 {
		-webkit-animation-delay: 1.9s;
		animation-delay: 1.9s
	}

	.delay2000 {
		-webkit-animation-delay: 2s;
		animation-delay: 2s
	}

	.delay2200 {
		-webkit-animation-delay: 2.2s;
		animation-delay: 2.2s
	}

	.delay2400 {
		-webkit-animation-delay: 2.4s;
		animation-delay: 2.4s
	}

	.delay2500 {
		-webkit-animation-delay: 2.5s;
		animation-delay: 2.5s
	}

	.delay2600 {
		-webkit-animation-delay: 2.6s;
		animation-delay: 2.6s
	}

	.delay2800 {
		-webkit-animation-delay: 2.8s;
		animation-delay: 2.8s
	}

	.delay3000 {
		-webkit-animation-delay: 3s;
		animation-delay: 3s
	}

	.delay3200 {
		-webkit-animation-delay: 3.2s;
		animation-delay: 3.2s
	}

	.delay3500 {
		-webkit-animation-delay: 3.5s;
		animation-delay: 3.5s
	}

	.delay3800 {
		-webkit-animation-delay: 3.8s;
		animation-delay: 3.8s
	}

	.delay4000 {
		-webkit-animation-delay: 4s;
		animation-delay: 4s
	}

	.delay4200 {
		-webkit-animation-delay: 4.2s;
		animation-delay: 4.2s
	}

	.delay4500 {
		-webkit-animation-delay: 4.5s;
		animation-delay: 4.5s
	}

	.delay5000 {
		-webkit-animation-delay: 5s;
		animation-delay: 5s
	}

	.delay5500 {
		-webkit-animation-delay: 5.5s;
		animation-delay: 5.5s
	}

	.delay6000 {
		-webkit-animation-delay: 6s;
		animation-delay: 6s
	}

	.delay6500 {
		-webkit-animation-delay: 6.5s;
		animation-delay: 6.5s
	}

	.delay7000 {
		-webkit-animation-delay: 7s;
		animation-delay: 7s
	}

	.delay7500 {
		-webkit-animation-delay: 7.5s;
		animation-delay: 7.5s
	}

	.delay8000 {
		-webkit-animation-delay: 8s;
		animation-delay: 8s
	}

	.delay8500 {
		-webkit-animation-delay: 8.5s;
		animation-delay: 8.5s
	}

	.delay9000 {
		-webkit-animation-delay: 9s;
		animation-delay: 9s
	}

	.delay10000 {
		-webkit-animation-delay: 10s;
		animation-delay: 10s
	}
</style>
